<template>
  <div>
    <!--参数组管理界面-->
    <FrontSideTable
      v-show="!isParamTypePageVisible"
      dataUrl="/param/paramGroup/getList"
      addUrl="/param/paramGroup/add"
      editUrl="/param/paramGroup/edit"
      deleteUrl="/param/paramGroup/delete"
      tableTitle="参数类型组"
      searchHint="根据参数组名或字段名查找"
      :form="form"
      :rules="rules"
      :searchProps="searchProps"
      :columns="columns"
      @onCreated="handleCreated"
      @beforeAdd="handleAdd"
      @beforeEdit="handleEdit"
      @onManage="onManage"
      manageable>
      <template slot="form">
        <el-form-item label="参数组名" prop="name">
          <el-input v-model="form.name" placeholder="输入参数组名"></el-input>
        </el-form-item>
        <el-form-item label="属性名称" prop="field">
          <el-input v-model="form.field" placeholder="输入属性名称"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.notes"></el-input>
        </el-form-item>
      </template>
    </FrontSideTable>

    <!--类型管理界面-子层-->
    <ParamTypeMaintenance
      v-if="isParamTypePageVisible"
      :tableTitle="'参数类型组 / ' + currentParamGroup.name"
      :paramGroupId="currentParamGroup.id"
      @onBack="handleBack">
    </ParamTypeMaintenance>
  </div>
</template>

<script>
  import ParamTypeMaintenance from "../../template/ParamTypeMaintenance.vue"
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {hasAuthorizedFunction} from "../../../assets/js/global"

  //用于重复校验
  let oldName = "",
    oldField = "";

  export default {
    name:"ParamGroupMaintenance",
    data() {
      //属性名校验
      let fieldValidator = (rule, value, callback)=>{
        if(oldField === value) {
          callback();
        } else if(this.dataList.some(item=>item.field === value)) {
          callback(new Error("属性名重复"));
        } else {
          callback();
        }
      };

      //参数组名称校验
      let nameValidator = (rule, value, callback)=> {
        if(oldName === value) {
          callback();
        } else if(this.dataList.some(item=>item.name === value)) {
          callback(new Error("参数组名重复"))
        } else {
          callback();
        }
      };

      return {
        dataList:[],
        currentParamGroup: {
          id:"",
          name:""
        },
        columns:[
          {prop:"name", label:"参数类型组名"},
          {prop:"field", label:"所属字段"}
        ],
        searchProps:["name", "field"],
        form:{
          name:"",
          field:""
        },
        rules:{
          field:[
            {required:true, message:"请输入属性名", trigger:"blur"},
            {validator:fieldValidator, trigger:"blur"}
          ],
          name:[
            {required:true, message:"请输入参数类型组名", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ]
        },
        isParamTypePageVisible: false,
      }
    },
    methods:{
      handleCreated(dataList) {
        this.dataList = dataList;
      },
      handleAdd() {
        oldName = "";
        oldField = "";
        clearFields(this.form);
      },
      handleEdit(data) {
        oldName = data.name;
        oldField = data.field;
        this.form = {...data};
      },
      onManage(data) {
        this.currentParamGroup = data;
        this.isParamTypePageVisible = true;
      },
      handleBack() {
        this.isParamTypePageVisible = false;
      }
    },
    components:{ParamTypeMaintenance, FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// ParamGroupMaintenance.vue?92b69e00
